<template>
  <div>
    <el-card>
      <el-button type="primary" icon="el-icon-plus" @click="add">添加学期</el-button>
      <br>
      <br>
      <!-- 主体部分的表格 -->
      <el-table :data="tableData" style="width: 100%" :current-row-key="tableData.id">
        <el-table-column type="index" label="编号" width="50"></el-table-column>
        <el-table-column label="学期">
          <template slot-scope="slotProps">{{slotProps.row.name}}</template>
        </el-table-column>
        <el-table-column label="时间">
          <template slot-scope="slotProps">{{slotProps.row.startDate}} 到 {{slotProps.row.endDate}}</template>
        </el-table-column>
        <el-table-column label="是否已生成计划">
          <template slot-scope="slotProps">{{slotProps.row.generateStatus}}</template>
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="slotProps">
            <el-button
              type="primary"
              size="mini"
              title="编辑"
              icon="el-icon-edit"
              @click="edit(slotProps.$index)"
            ></el-button>
            <el-button
              type="danger"
              size="mini"
              title="删除"
              icon="el-icon-delete"
              @click="del(slotProps.$index)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <!-- 底部翻页器 -->
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :pager-count="5"
          :total="page.total"
          :page-size="page.pageSize"
          :current-page="page.currentPage"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </el-card>
    <!-- 点击删除的弹出框 -->
    <el-dialog :title="dialog.del.title" :visible.sync="dialog.del.show" width="400px" center>
      <span>{{dialog.del.content}}</span>
      <span slot="footer">
        <el-button @click="dialog.del.show = false">取 消</el-button>
        <el-button type="primary" @click="delSure">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 点击添加、编辑的弹出框 -->
    <el-dialog
      :title="dialog.isEdit?'编辑':'添加'"
      :visible.sync="dialog.show"
      @close="handleDialogClose(`formData`)"
      width="700px"
      center
    >
      <el-form ref="formData" :rules="ruleForm" :model="formData" label-width="80px">
        <el-form-item label="学期名称" prop="name">
          <el-input placeholder="请输入学期名称" v-model="formData.name"></el-input>
        </el-form-item>
        <!-- <el-form-item label="学期描述" prop="des">
          <el-input placeholder="请输入学期描述" v-model="formData.des"></el-input>
        </el-form-item> -->
        <el-form-item label="开始日期" prop="start">
          <el-date-picker v-model="formData.startDate" type="date" placeholder="开始日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" prop="end">
          <el-date-picker v-model="formData.endDate" type="date" placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialog.show = false">取 消</el-button>
          <el-button type="primary" @click="dialogSure('formData')">{{dialog.isEdit?"保 存":"添 加"}}</el-button>
          <el-button @click="resetForm('formData')">重 置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import request from '@/utils/request'
export default {
  data() {
    return {
      tableData: [],
      page: {
        total: 10,
        pageSize: 10,
        currentPage: 1
      },
      dialog: {
        isEdit: false,
        show: false,
        editIndex: '',
        del: {
          title: '删除',
          show: false,
          content: '',
          index: ''
        }
      },
      formData: {}, // 表单中的数据
      ruleForm: {
        // 表单验证
        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
        des: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 翻页器
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList()
    },
    // 初始化列表
    getList(current) {
      request
        .get('/sys/terms/page', {
          params: {
            size: this.page.pageSize,
            current: this.page.currentPage
          }
        })
        .then(res => {
          this.tableData = res.content.records
          this.page.total = res.content.total
        })
    },
    // 根据id查询详细信息
    getListById(id) {
      request.get(`/sys/terms/${id}`).then(res => {
        const { name, des } = { ...res.content }
        this.formData = { name, des }
      })
    },
    // 删除
    del(index) {
      this.dialog.del.show = true
      this.dialog.del.index = index
      this.dialog.del.content = `确定删除${this.tableData[index].name}吗？`
    },
    delSure() {
      request
        .delete(`/sys/terms/${this.tableData[this.dialog.del.index].id}`)
        .then(res => {
          if (res.code === 0) {
            this.getList()
          } else {
            this.$message.error(res.content)
          }
          this.dialog.del.show = false
        })
    },
    // 添加
    add() {
      this.dialog.show = true
      this.dialog.isEdit = false
    },
    // 编辑
    edit(index) {
      this.dialog.show = true
      this.dialog.isEdit = true
      this.dialog.editIndex = index
      this.getListById(this.tableData[index].id)
    },
    dialogSure(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (!this.dialog.isEdit) {
            // 添加操作
            request
              .post('/sys/terms', {
                ...this.formData
              })
              .then(res => {
                if (res.code === 0) {
                  this.getList()
                } else {
                  this.$message.error(res.content)
                }
              })
          } else {
            // 编辑操作
            request
              .put('/sys/terms', {
                id: this.tableData[this.dialog.editIndex].id,
                ...this.formData
              })
              .then(res => {
                if (res.code === 0) {
                  this.getList()
                } else {
                  this.$message.error(res.content)
                }
              })
          }
          this.dialog.show = false
        }
      })
    },
    // 弹框关闭时的回调
    handleDialogClose(formName) {
      this.resetForm(formName)
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped>
.pagination {
  float: right;
  margin-bottom: 15px;
}
</style>
